<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <i class="circle"></i>
          <div class="num">
            <span>30个</span>
            <span>粉丝数</span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <i class="circle"></i>
          <div class="num">
            <span>22%</span>
            <span>粉丝累计阅读量</span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <i class="circle"></i>
          <div class="num">
            <span>1.2元</span>
            <span>粉丝收益</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="tlfans">
      <span>头条粉丝</span>
      <div ref="tlfans" class="tlfans-in"></div>
    </div>
    <div class="tabledata">
      <span>列表数据</span>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  mounted() {
    var tlChart = echarts.init(this.$refs.tlfans);
    tlChart.setOption({
      xAxis: {},
      yAxis: {},
      series: [
        {
          symbolSize: 20,
          data: [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
          ],
          type: "scatter"
        }
      ]
    });
  }
};
</script>

<style lang="less" scoped>
.el-row {
  margin: 30px 0px;
  .el-col {
    height: 112px;
    padding: 0px 20px !important;
    .grid-content {
      background-color: #eee;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .circle {
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #f00;
      }
      .num {
        margin-left: 20px;
        font-size: 18px;
        span {
          display: block;
        }
      }
    }
  }
}
.tlfans {
  height: 250px;
  .tlfans-in {
    height: 230px;
  }
}
.el-table {
  margin-top: 20px;
}
</style>